<template>
  <div class="mains">
    <div class="liveList">
      <headerBack></headerBack>
      <div class="testResultWrap">
        <div :class="['titleBar', $route.query.id == 2 ? 'bg_jg_yali' : $route.query.id == 3 ? 'bg_jg_xinli' : 'bg_jg_xuexi']">
          <b>{{ resultData.resultType }}&nbsp; &nbsp;{{ resultData.scoreRange }}</b>
        </div>
        <div class="issueBox">
          <p>{{ resultData.explain }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headerBack from '~/components/headerBack'
import { createPressureTestResult, createMentalTestResult, createStudyTestResult } from '~/api/colleges'
import ls from 'store2'
export default {
  components: {
    headerBack,
  },
  data() {
    return {
      resultData: {},
    }
  },
  mounted: function() {
    this.$visit('sxAssess/testResult')
    this.createPressureTestResult()
    if (this.$route.query.id == 2) {
      this.createPressureTestResult()
    } else if (this.$route.query.id == 3) {
      this.createMentalTestResult()
    } else {
      this.createStudyTestResult()
    }
  },
  methods: {
    createPressureTestResult() {
      this.$loading('open')
      let obj = {
        selectLog: this.$route.query.score,
        testId: this.$route.query.id * 1,
        userType: ls.get('userType'),
      }
      createPressureTestResult(obj)
        .then((res) => {
          if (res.code == '0') {
            this.resultData = res.data
          }
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    createStudyTestResult() {
      this.$loading('open')
      let obj = {
        selectLog: this.$route.query.score,
        testId: this.$route.query.id * 1,
        userType: ls.get('userType'),
      }
      createStudyTestResult(obj)
        .then((res) => {
          if (res.code == '0') {
            this.resultData = res.data
          }
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    createMentalTestResult() {
      this.$loading('open')
      let obj = {
        selectLog: this.$route.query.score,
        testId: this.$route.query.id * 1,
        userType: ls.get('userType'),
      }
      createMentalTestResult(obj)
        .then((res) => {
          if (res.code == '0') {
            this.resultData = res.data
          }
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
  },
}
</script>
<style scoped lang="less">
.testResultWrap {
  width: 6.9rem;
  height: auto;
  padding-bottom: 0.5rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
  border-radius: 0.2rem;
  margin: 0.3rem auto;
  .titleBar {
    height: 1.8rem;
    width: 100%;
    padding-left: 0.3rem;
    b {
      display: block;
    }
    b {
      height: 1.8rem;
      line-height: 1.8rem;
      font-size: 0.4rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
    }
  }
  .bg_jg_yali {
    background: url('~/static/images/bg_jg_yali.png') no-repeat;
    background-size: 100% 100%;
  }
  .bg_jg_xuexi {
    background: url('~/static/images/bg_jg_xuexi.png') no-repeat;
    background-size: 100% 100%;
  }
  .bg_jg_xinli {
    background: url('~/static/images/bg_jg_xinli.png') no-repeat;
    background-size: 100% 100%;
  }

  .issueBox {
    height: 10rem;
    padding: 0.3rem;
    box-sizing: border-box;
    p {
      font-size: 0.26rem;
      font-weight: 400;
      color: rgba(34, 34, 34, 1);
      line-height: 0.45rem;
    }
  }
}
</style>
